<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>contact.html</title>
    <link rel="stylesheet" href="static/css/swiper-bundle.min.css" />
    <link rel="stylesheet" href="static/css/animate.min.css" />
    <link rel="stylesheet" href="static/css/common.css" />
    <link rel="stylesheet" href="static/css/style.css" />
    <link rel="stylesheet" href="static/css/product-center.css" />
    <link rel="stylesheet" href="static/css/contact.css" />
    <script src="static/js/jQuery.js"></script>
    <script src="static/js/layui.js"></script>
    <script src="static/js/swiper-bundle.min.js"></script>
  </head>
  <style type="text/css">
    .swiper {
      --swiper-theme-color: #ff6600;
      --swiper-pagination-color: #00ff33;
      /* 两种都可以 */
    }

    .xiangang {
      color: red;
    }
  </style>

  <body>
    <header class="com-header"></header>
    <script>
      $(function () {
        $('.com-header').load('component/header.html'); //加载导航栏
      });
    </script>
    <main class="tachnology">
      <section class="contact-banner">
        <div class="contact-banner-bg">
          <div class="pc">
            <img src="static/images/about/con-banner.jpg" alt="ctmon" />
          </div>
          <div class="h5">
            <img src="static/images/about/con-banner.jpg" alt="ctmon" />
          </div>
        </div>
        <div class="contact-banner-container">
          <div class="contact-banner-text w1400">
            <h1 class="contact-banner-title wow fadeInUp">联系我们</h1>
            <p class="contact-banner-desc wow fadInUp">专业技术咨询，用心为您服务</p>
          </div>
        </div>
      </section>

      <section class="contact-s1">
        <div class="about-s1 w1400 wow fadeInUp">
          <a href="#" class="active"> 联系方式 </a>
          <a href="#"> 地图导航 </a>
          <a href="#">
            <div>在线留言</div>
          </a>
        </div>
      </section>
      <section class="contact-s2">
        <div class="problem-s1 w1400">
          <div class="left-word wow fadeInUp">
            <h2 class="titile">Contact <span class="us">us</span></h2>
            <h2>联系方式</h2>

            <div class="line-d"></div>
            <div>
              <p>
                亨瑞达集团有限公司全体同仁<br />
                欢迎各位新老客户来电咨询洽谈， 我们竭诚为您服务！
              </p>
            </div>
            <p class="mont-word">
              <img src="static/images/about/hengruida.png" alt="" />
            </p>
          </div>
          <div class="right-word-tit wow fadeInUp">
            <div class="right-word">
              <div class="right-word1">
                <div class="yaaaa">亨瑞达总公司</div>
                <p class="number-phone">电话：<span class="blue-bgck">186-8226-5747</span></p>
                <p class="chuangzhen">传真：0755-32937809</p>
                <p class="email">邮箱：szhrd@szhero-tech.com</p>
              </div>
            </div>
            <div class="right-word">
              <div class="right-word1">
                <div class="yaaaa">亨瑞达总公司</div>
                <p class="number-phone">电话：<span class="blue-bgck">186-8226-5747</span></p>
                <p class="chuangzhen">传真：0755-32937809</p>
                <p class="email">邮箱：szhrd@szhero-tech.com</p>
              </div>
            </div>
            <div class="right-word">
              <div class="right-word1">
                <div class="yaaaa">亨瑞达总公司</div>
                <p class="number-phone">电话：<span class="blue-bgck">186-8226-5747</span></p>
                <p class="chuangzhen">传真：0755-32937809</p>
                <p class="email">邮箱：szhrd@szhero-tech.com</p>
              </div>
            </div>
            <div class="right-word">
              <div class="right-word1">
                <div class="yaaaa">亨瑞达总公司</div>
                <p class="number-phone">电话：<span class="blue-bgck">186-8226-5747</span></p>
                <p class="chuangzhen">传真：0755-32937809</p>
                <p class="email">邮箱：szhrd@szhero-tech.com</p>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="contact-s3">
        <div class="problem-s1 problem-s1-two">
          <div class="blue-bgc lfet-1400">
            <div class="left-word-two wow fadeInUp">
              <h2 class="titile">Branch office</h2>
              <h2 class="jigou">分支机构</h2>
              <div class="line-ddd">
                <a href="contact.html " class="gongsi active">香港分公司</a>
                <a href="" class="gongsi">江门生产基地</a>
                <a href="" class="gongsi">常州分公司</a>
                <a href="" class="gongsi">深圳分公司</a>
              </div>
            </div>
            <div class="right-word-tit-two wow fadeInUp">
              <div class="right-swiper">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <div class="right-word active">
                      <div class="right-word1 specia">
                        <div class="yaaaa">香港总公司</div>
                        <p class="number-phone">电话：<strong>186-8226-5747</strong></p>
                        <p class="chuangzhen">传真：0755-32937809</p>
                        <p class="email">邮箱：szhrd@szhero-tech.com</p>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="right-word">
                      <div class="right-word1 specia">
                        <div class="yaaaa">江门生产基地</div>
                        <p class="number-phone">电话：<strong>186-8226-5747</strong></p>
                        <p class="chuangzhen">传真：0755-32937809</p>
                        <p class="email">邮箱：szhrd@szhero-tech.com</p>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="right-word">
                      <div class="right-word1 specia">
                        <div class="yaaaa">常州分公司</div>
                        <p class="number-phone">电话：<strong>186-8226-5747</strong></p>
                        <p class="chuangzhen">传真：0755-32937809</p>
                        <p class="email">邮箱：szhrd@szhero-tech.com</p>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="right-word">
                      <div class="right-word1 specia">
                        <div class="yaaaa">深圳分公司</div>
                        <p class="number-phone">电话：<strong>186-8226-5747</strong></p>
                        <p class="chuangzhen">传真：0755-32937809</p>
                        <p class="email">邮箱：szhrd@szhero-tech.com</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="contact-s4 lfet-1400">
        <div class="leave-tit">
          <h2 class="liuyan wow fadeInUp">您的满意我们的追求</h2>
        </div>

        <div class="leave">
          <div class="contact-s4-1 wow fadeInUp">
            <div class="contact-s4-2">
              <p>与我们<span>留言</span></p>
            </div>

            <div class="line-leave"></div>
            <form>
              <div class="leave-word">
                <div class="li_box">
                  <div class="texts">姓名</div>
                  <span>*</span>
                  <input type="text" value="" />
                </div>

                <div class="li_box">
                  <div class="texts">电话</div>
                  <span>*</span>
                  <input type="text" value="" />
                </div>

                <div class="li_box">
                  <div class="texts">邮箱</div>
                  <span>*</span>
                  <input type="text" value="" />
                </div>

                <div class="li_box">
                  <div class="texts">公司</div>
                  <span>*</span>
                  <input type="text" value="" />
                </div>

                <div class="li_box">
                  <div class="texts">留言</div>
                  <span>*</span>
                  <input type="text" value="" />
                </div>
              </div>
              <button type="submit" class="leave-btn">提交留言</button>
            </form>
          </div>
          <div class="contact-s4-3 wow fadeInUp">
            <img src="static/images/picture/图层 1.png" alt="ctmon" />
          </div>
        </div>
      </section>
    </main>
    <footer class="com-footer">
      <script>
        $(function () {
          $('.com-footer').load('component/footer.html'); //加载足部
        });
      </script>
    </footer>
    <script src="static/js/jquery.counterup.js"></script>
    <script src="static/js/wow.js"></script>
    <script src="static/js/public.js"></script>
    <script>
      const rightWord = document.querySelectorAll('.right-word');
      rightWord.forEach((item, index) => {
        item.addEventListener('click', (e) => {
          rightWord.forEach((item) => {
            item.classList.remove('active');
          });
          item.classList.add('active');
        });
      });

      const right_slide = document.querySelectorAll('.right-word-tit-two .right-word');
      const right_swiper = new Swiper('.right-swiper', {
        slidesPerView: 1,
        spaceBetween: 30,
        slideToClickedSlide: true,
        normalizeSlideIndex: true,
        breakpoints: {
          768: {
            slidesPerView: 2,
            spaceBetween: 50,
            grid: {
              rows: 2,
              fill: 'row'
            }
          }
        },
        on: {
          slideChange: function () {
            right_swiper_btn.forEach((item, index) => {
              item.classList.remove('active');
              right_slide[index].classList.remove('active');
            });

            right_slide[this.activeIndex].classList.add('active');
            right_swiper_btn[this.activeIndex].classList.add('active');
          }
        }
      });
      const right_swiper_btn = document.querySelectorAll('.line-ddd a');
      right_swiper_btn.forEach((item, index) => {
        item.addEventListener('click', (e) => {
          e.preventDefault();
          right_swiper.slideTo(index);
        });
      });
      right_slide[right_slide.length - 1].addEventListener('click', (e) => {
        right_slide.forEach((item, index) => {
          item.classList.remove('active');
          right_swiper_btn[index].classList.remove('active');
        });
        right_slide[right_slide.length - 1].classList.add('active');
        right_swiper_btn[right_slide.length - 1].classList.add('active');
      });
    </script>
  </body>
</html>
